<template>
	<view class="content">
		<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" circular="true" class="swiper">
			<swiper-item v-for="item,index in bannerList" :key="index" class="swiper-item">
				<image :src="item.carouselUrl" mode="" class="img"></image>
			</swiper-item>
		
		</swiper>
		<view class="nav">
			<view class="nav-item" v-for="item,index in navList" :key="item.categoryId">
				<image :src="item.imgUrl" mode="" class="image"></image>
				<view class="name">
					{{item.name}}
				</view>
			</view>
		</view>
		<view class="news-title">
			新品上线
		</view>
		<view class="news">
			<view class="news-item" v-for="item,index in newsList" :key="item.goodsId">
				<image :src="item.goodsCoverImg" mode="" class="img"></image>
				<view class="title">
					{{item.goodsName}}
				</view>
				<view class="price">
					￥{{item.sellingPrice}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import data from '../../data/data.js'
	export default {
		data() {
			return {
				title: 'Hello',
				bannerList:[],
				navList:[],
				newsList:[]
			}
		},
		onLoad() {
          this.getList()
		  console.log(data);
		  this.navList = data.iconList
		},
		methods: {
		   getList(){
			   uni.request({
			   	url:'http://backend-api-01.newbee.ltd/api/v1/index-infos',
			   			method:"GET",
			   			success:(res)=> {
			   				console.log(res.data.data);
							this.bannerList = res.data.data.carousels
							this.newsList = res.data.data.newGoodses
							
							
			   			}
			   })
		   }
		}
	}
</script>

<style lang="scss">
	.swiper{
		height: 400rpx;
		.swiper-item{
			width: 100%;
			height: 400rpx;
			.img{
				width: 100%;
				height: 100%;
			}
		}	
	}
	.nav{
		width: 100%;
		display: flex;
		padding: 10px 20rpx;
		box-sizing: border-box;
		align-items: center;
		flex-wrap: wrap;
		margin-top: 10px;
		
		justify-content: space-around;
		.nav-item{
			text-align: center;
			margin-top: 10rpx;
			width: 20%;
			font-size: 28rpx;
			
			.image{
				width: 70rpx;
				height: 70rpx;
			}
			
		}
	}
.news-title{
	text-align: center;
	background: #f5f5ff;
	height: 100rpx;
	line-height: 100rpx;
}
.news{
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	width: 100%;
	padding: 0 20rpx;
	box-sizing: border-box;
	
	.news-item{
		width: 50%;
		font-size: 28rpx;
		margin: 10px 0;
		.img{
			height: 300rpx;
			width: 375rpx;
		}
		
	}
}
</style>
